<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Adomx - Responsive Bootstrap 4 Admin Template</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">

    <!-- CSS
	============================================ -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">

    <!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/vendor/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="assets/css/vendor/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/vendor/themify-icons.css">
    <link rel="stylesheet" href="assets/css/vendor/cryptocurrency-icons.css">

    <!-- Plugins CSS -->
    <link rel="stylesheet" href="assets/css/plugins/plugins.css">

    <!-- Helper CSS -->
    <link rel="stylesheet" href="assets/css/helper.css">

    <!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- Custom Style CSS Only For Demo Purpose -->
    <link id="cus-style" rel="stylesheet" href="assets/css/style-primary.css">

</head>

<body>

    <div class="main-wrapper">


        <!-- Header Section Start -->
        <div class="header-section">
            <div class="container-fluid">
                <div class="row justify-content-between align-items-center">

                    <!-- Header Logo (Header Left) Start -->
                    <div class="header-logo col-auto">
                        <a href="index.html">
                            <img src="assets/images/logo/logo.png" alt="">
                            <img src="assets/images/logo/logo-light.png" class="logo-light" alt="">
                        </a>
                    </div><!-- Header Logo (Header Left) End -->

                    <!-- Header Right Start -->
                    <div class="header-right flex-grow-1 col-auto">
                        <div class="row justify-content-between align-items-center">

                            <!-- Side Header Toggle & Search Start -->
                            <div class="col-auto">
                                <div class="row align-items-center">

                                    <!--Side Header Toggle-->
                                    <div class="col-auto"><button class="side-header-toggle"><i class="zmdi zmdi-menu"></i></button></div>

                                    <!--Header Search-->
                                    <div class="col-auto">

                                        <div class="header-search">

                                            <button class="header-search-open d-block d-xl-none"><i class="zmdi zmdi-search"></i></button>

                                            <div class="header-search-form">
                                                <form action="#">
                                                    <input type="text" placeholder="Search Here">
                                                    <button><i class="zmdi zmdi-search"></i></button>
                                                </form>
                                                <button class="header-search-close d-block d-xl-none"><i class="zmdi zmdi-close"></i></button>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div><!-- Side Header Toggle & Search End -->

                            <!-- Header Notifications Area Start -->
                            <div class="col-auto">

                                <ul class="header-notification-area">

                                    <!--Language-->
                                    <li class="adomx-dropdown position-relative col-auto">
                                        <a class="toggle" href="#"><img class="lang-flag" src="assets/images/flags/flag-1.jpg" alt=""><i class="zmdi zmdi-caret-down drop-arrow"></i></a>

                                        <!-- Dropdown -->
                                        <ul class="adomx-dropdown-menu dropdown-menu-language">
                                            <li><a href="#"><img src="assets/images/flags/flag-1.jpg" alt=""> English</a></li>
                                            <li><a href="#"><img src="assets/images/flags/flag-2.jpg" alt=""> Japanese</a></li>
                                            <li><a href="#"><img src="assets/images/flags/flag-3.jpg" alt=""> Spanish </a></li>
                                            <li><a href="#"><img src="assets/images/flags/flag-4.jpg" alt=""> Germany</a></li>
                                        </ul>

                                    </li>

                                    <!--Mail-->
                                    <li class="adomx-dropdown col-auto">
                                        <a class="toggle" href="#"><i class="zmdi zmdi-email-open"></i><span class="badge"></span></a>

                                        <!-- Dropdown -->
                                        <div class="adomx-dropdown-menu dropdown-menu-mail">
                                            <div class="head">
                                                <h4 class="title">You have 3 new mail.</h4>
                                            </div>
                                            <div class="body custom-scroll">
                                                <ul>
                                                    <li>
                                                        <a href="#">
                                                            <div class="image"><img src="assets/images/avatar/avatar-2.jpg" alt=""></div>
                                                            <div class="content">
                                                                <h6>Sub: New Account</h6>
                                                                <p>There are many variations of passages of Lorem Ipsum available. </p>
                                                            </div>
                                                            <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <div class="image"><img src="assets/images/avatar/avatar-1.jpg" alt=""></div>
                                                            <div class="content">
                                                                <h6>Sub: Mail Support</h6>
                                                                <p>There are many variations of passages of Lorem Ipsum available. </p>
                                                            </div>
                                                            <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <div class="image"><img src="assets/images/avatar/avatar-2.jpg" alt=""></div>
                                                            <div class="content">
                                                                <h6>Sub: Product inquiry</h6>
                                                                <p>There are many variations of passages of Lorem Ipsum available. </p>
                                                            </div>
                                                            <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <div class="image"><img src="assets/images/avatar/avatar-1.jpg" alt=""></div>
                                                            <div class="content">
                                                                <h6>Sub: Mail Support</h6>
                                                                <p>There are many variations of passages of Lorem Ipsum available. </p>
                                                            </div>
                                                            <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                    </li>

                                    <!--Notification-->
                                    <li class="adomx-dropdown col-auto">
                                        <a class="toggle" href="#"><i class="zmdi zmdi-notifications"></i><span class="badge"></span></a>

                                        <!-- Dropdown -->
                                        <div class="adomx-dropdown-menu dropdown-menu-notifications">
                                            <div class="head">
                                                <h5 class="title">You have 4 new notification.</h5>
                                            </div>
                                            <div class="body custom-scroll">
                                                <ul>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-notifications-none"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-block"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-info-outline"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-shield-security"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-notifications-none"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-block"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-info-outline"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-shield-security"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="footer">
                                                <a href="#" class="view-all">view all</a>
                                            </div>
                                        </div>

                                    </li>

                                    <!--User-->
                                    <li class="adomx-dropdown col-auto">
                                        <a class="toggle" href="#">
                                            <span class="user">
                                        <span class="avatar">
                                            <img src="assets/images/avatar/avatar-1.jpg" alt="">
                                            <span class="status"></span>
                                            </span>
                                            <span class="name">Madison Howard</span>
                                            </span>
                                        </a>

                                        <!-- Dropdown -->
                                        <div class="adomx-dropdown-menu dropdown-menu-user">
                                            <div class="head">
                                                <h5 class="name"><a href="#">Madison Howard</a></h5>
                                                <a class="mail" href="#">mailnam@mail.com</a>
                                            </div>
                                            <div class="body">
                                                <ul>
                                                    <li><a href="#"><i class="zmdi zmdi-account"></i>Profile</a></li>
                                                    <li><a href="#"><i class="zmdi zmdi-email-open"></i>Inbox</a></li>
                                                    <li><a href="#"><i class="zmdi zmdi-wallpaper"></i>Activity</a></li>
                                                </ul>
                                                <ul>
                                                    <li><a href="#"><i class="zmdi zmdi-settings"></i>Setting</a></li>
                                                    <li><a href="#"><i class="zmdi zmdi-lock-open"></i>Sing out</a></li>
                                                </ul>
                                                <ul>
                                                    <li><a href="#"><i class="zmdi zmdi-paypal"></i>Payment</a></li>
                                                    <li><a href="#"><i class="zmdi zmdi-google-pages"></i>Invoice</a></li>
                                                </ul>
                                            </div>
                                        </div>

                                    </li>

                                </ul>

                            </div><!-- Header Notifications Area End -->

                        </div>
                    </div><!-- Header Right End -->

                </div>
            </div>
        </div><!-- Header Section End -->
        <!-- Side Header Start -->
        <div class="side-header show">
            <button class="side-header-close"><i class="zmdi zmdi-close"></i></button>
            <!-- Side Header Inner Start -->
            <div class="side-header-inner custom-scroll">

                <nav class="side-header-menu" id="side-header-menu">
                    <ul>
                        <li class="has-sub-menu"><a href="#"><i class="ti-home"></i> <span>Dashboard</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="index.html"><span>E-commerce (Default)</span></a></li>
                                <li><a href="index-crypto.html"><span>Cryptocurrency</span></a></li>
                            </ul>
                        </li>
                        <li><a href="widgets.html"><i class="ti-palette"></i> <span>Widgets</span></a></li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-package"></i> <span>Basic Elements</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="elements-alerts.html"><span>Alerts</span></a></li>
                                <li><a href="elements-accordions.html"><span>Accordions</span></a></li>
                                <li><a href="elements-avatar.html"><span>Avatar</span></a></li>
                                <li><a href="elements-badge.html"><span>Badge</span></a></li>
                                <li><a href="elements-buttons.html"><span>Buttons</span></a></li>
                                <li><a href="elements-carousel.html"><span>Carousel</span></a></li>
                                <li><a href="elements-dropdown.html"><span>Dropdown</span></a></li>
                                <li><a href="elements-list-group.html"><span>List Group</span></a></li>
                                <li><a href="elements-media.html"><span>Media</span></a></li>
                                <li><a href="elements-modal.html"><span>Modal</span></a></li>
                                <li><a href="elements-pagination.html"><span>Pagination</span></a></li>
                                <li><a href="elements-progress.html"><span>Progress Bar</span></a></li>
                                <li><a href="elements-spinners.html"><span>Spinners</span></a></li>
                                <li><a href="elements-tabs.html"><span>Tabs</span></a></li>
                                <li><a href="elements-tooltip.html"><span>Tooltip</span></a></li>
                                <li><a href="elements-typography.html"><span>Typography</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-crown"></i> <span>Advance Elements</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="elements-clipboard.html"><span>Clipboard</span></a></li>
                                <li><a href="elements-fullcalendar.html"><span>Full Calendar</span></a></li>
                                <li><a href="elements-media-player.html"><span>Media Player</span></a></li>
                                <li><a href="elements-sortable.html"><span>Sortable (Drag&Drop)</span></a></li>
                                <li><a href="elements-toastr.html"><span>Toastr</span></a></li>
                                <li><a href="elements-rating.html"><span>Rating</span></a></li>
                                <li><a href="elements-sweetalert.html"><span>Sweet Alert</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-stamp"></i> <span>Icons</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="icons-cryptocurrency.html"><span>Cryptocurrency</span></a></li>
                                <li><a href="icons-fontawesome.html"><span>Font Awesome</span></a></li>
                                <li><a href="icons-material.html"><span>Material Icon</span></a></li>
                                <li><a href="icons-themify.html"><span>Themify Icon</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-notepad"></i> <span>Forms</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="form-basic-elements.html"><span>Basic Elements</span></a></li>
                                <li><a href="form-checkbox.html"><span>Checkbox</span></a></li>
                                <li><a href="form-date-mask.html"><span>Date & Mask</span></a></li>
                                <li><a href="form-editor.html"><span>Editor</span></a></li>
                                <li><a href="form-file-upload.html"><span>File Upload</span></a></li>
                                <li><a href="form-layout.html"><span>Layout</span></a></li>
                                <li><a href="form-radio.html"><span>Radio</span></a></li>
                                <li><a href="form-range-slider.html"><span>Range Slider</span></a></li>
                                <li><a href="form-selects.html"><span>Selects</span></a></li>
                                <li><a href="form-switchers.html"><span>Switchers</span></a></li>
                                <li><a href="form-wizard.html"><span>Wizard</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-layout"></i> <span>Table</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="table-basic.html"><span>Basic</span></a></li>
                                <li><a href="table-data-table.html"><span>Data Table</span></a></li>
                                <li><a href="table-footable.html"><span>Footable</span></a></li>
                                <li><a href="table-jsgrid.html"><span>Jsgrid</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-pie-chart"></i> <span>Charts</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="chart-chartjs.html"><span>ChartJs</span></a></li>
                                <li><a href="chart-echarts.html"><span>Echarts</span></a></li>
                                <li><a href="chart-google.html"><span>Google Chart</span></a></li>
                                <li><a href="chart-morris.html"><span>Morris  Chart</span></a></li>
                                <li><a href="chart-sparkline.html"><span>Sparkline  Chart</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-map"></i> <span>Maps</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="map-vector.html"><span>Vector Map</span></a></li>
                                <li><a href="map-google.html"><span>Google Map</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-shopping-cart"></i> <span>E-commerce</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="add-product.html"><span>Add Product</span></a></li>
                                <li><a href="edit-product.html"><span>Edit Product</span></a></li>
                                <li><a href="invoice-list.html"><span>Invoice List</span></a></li>
                                <li><a href="invoice-details.html"><span>Invoice Details</span></a></li>
                                <li><a href="order-list.html"><span>Order List</span></a></li>
                                <li><a href="order-details.html"><span>Order Details</span></a></li>
                                <li><a href="manage-products.html"><span>Manage Products</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-gift"></i> <span>Apps</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="chat.html"><span>Chat</span></a></li>
                                <li><a href="mail.html"><span>Mail</span></a></li>
                                <li><a href="single-mail.html"><span>Single Mail</span></a></li>
                                <li><a href="todo-list.html"><span>Todo List</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-lock"></i> <span>Authentication</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="login.html"><span>login</span></a></li>
                                <li><a href="register.html"><span>register</span></a></li>
                                <li><a href="author-profile.html"><span>Profile</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-layers"></i> <span>Pages</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="blank.html"><span>Blank</span></a></li>
                                <li><a href="timeline.html"><span>Timeline</span></a></li>
                                <li><a href="pricing.html"><span>Pricing</span></a></li>
                                <li><a href="error-1.html"><span>error-1</span></a></li>
                                <li><a href="error-2.html"><span>error-2</span></a></li>
                            </ul>
                        </li>

                    </ul>
                </nav>

            </div><!-- Side Header Inner End -->
        </div><!-- Side Header End -->

        <!-- Content Body Start -->
        <div class="content-body">

            <!-- Page Headings Start -->
            <div class="row justify-content-between align-items-center mb-10">

                <!-- Page Heading Start -->
                <div class="col-12 col-lg-auto mb-20">
                    <div class="page-heading">
                        <h3 class="title">Elements <span>/ Tabs</span></h3>
                    </div>
                </div><!-- Page Heading End -->

            </div><!-- Page Headings End -->

            <div class="row">

                <!--Basic Tab Start-->
                <div class="col-lg-6 col-12 mb-30">
                    <div class="box">
                        <div class="box-head">
                            <h4 class="title">Basic Tab</h4>
                        </div>
                        <div class="box-body">
                            <ul class="nav nav-tabs mb-15">
                                <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home">Home</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#profile">Profile</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#contact">Contact</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="home">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                                <div class="tab-pane fade" id="profile">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                                <div class="tab-pane fade" id="contact">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Basic Tab End-->

                <!--Tab With Icon Start-->
                <div class="col-lg-6 col-12 mb-30">
                    <div class="box">
                        <div class="box-head">
                            <h4 class="title">Tab With Icon</h4>
                        </div>
                        <div class="box-body">
                            <ul class="nav nav-tabs mb-15">
                                <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home2"><i class="zmdi zmdi-home"></i> Home</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#profile2"><i class="zmdi zmdi-account"></i> Profile</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#contact2"><i class="zmdi zmdi-email"></i> Contact</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="home2">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                                <div class="tab-pane fade" id="profile2">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                                <div class="tab-pane fade" id="contact2">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Tab With Icon End-->

                <!--Vertical Tab Start-->
                <div class="col-lg-6 col-12 mb-30">
                    <div class="box">
                        <div class="box-head">
                            <h4 class="title">Vertical Tab</h4>
                        </div>
                        <div class="box-body">
                            <div class="row mbn-15">
                                <div class="col-md-4 col-12 mb-15">
                                    <ul class="nav nav-tabs flex-column">
                                        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home3">Home</a></li>
                                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#profile3">Profile</a></li>
                                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#contact3">Contact</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-8 col-12 mb-15">
                                    <div class="tab-content">
                                        <div class="tab-pane fade show active" id="home3">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                        <div class="tab-pane fade" id="profile3">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                        <div class="tab-pane fade" id="contact3">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Vertical Tab End-->


                <!--Vertical Tab With Icon Start-->
                <div class="col-lg-6 col-12 mb-30">
                    <div class="box">
                        <div class="box-head">
                            <h4 class="title">Vertical Tab With Icon</h4>
                        </div>
                        <div class="box-body">
                            <div class="row mbn-15">
                                <div class="col-md-4 col-12 mb-15">
                                    <ul class="nav nav-tabs flex-column">
                                        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home4"><i class="zmdi zmdi-home"></i> Home</a></li>
                                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#profile4"><i class="zmdi zmdi-account"></i> Profile</a></li>
                                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#contact4"><i class="zmdi zmdi-email"></i> Contact</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-8 col-12 mb-15">
                                    <div class="tab-content">
                                        <div class="tab-pane fade show active" id="home4">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                        <div class="tab-pane fade" id="profile4">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                        <div class="tab-pane fade" id="contact4">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Vertical Tab With Icon End-->

                <!--Basic Pill Start-->
                <div class="col-lg-6 col-12 mb-30">
                    <div class="box">
                        <div class="box-head">
                            <h4 class="title">Basic Pill</h4>
                        </div>
                        <div class="box-body">
                            <ul class="nav nav-pills mb-15">
                                <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#home5">Home</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#profile5">Profile</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#contact5">Contact</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="home5">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                                <div class="tab-pane fade" id="profile5">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                                <div class="tab-pane fade" id="contact5">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Basic Pill End-->

                <!--Pill With Icon Start-->
                <div class="col-lg-6 col-12 mb-30">
                    <div class="box">
                        <div class="box-head">
                            <h4 class="title">Pill With Icon</h4>
                        </div>
                        <div class="box-body">
                            <ul class="nav nav-pills mb-15">
                                <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#home6"><i class="zmdi zmdi-home"></i> Home</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#profile6"><i class="zmdi zmdi-account"></i> Profile</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#contact6"><i class="zmdi zmdi-email"></i> Contact</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="home6">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                                <div class="tab-pane fade" id="profile6">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                                <div class="tab-pane fade" id="contact6">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Pill With Icon End-->

                <!--Vertical Pill Start-->
                <div class="col-lg-6 col-12 mb-30">
                    <div class="box">
                        <div class="box-head">
                            <h4 class="title">Vertical Pill</h4>
                        </div>
                        <div class="box-body">
                            <div class="row mbn-15">
                                <div class="col-md-4 col-12 mb-15">
                                    <ul class="nav nav-pills flex-column">
                                        <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#home7">Home</a></li>
                                        <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#profile7">Profile</a></li>
                                        <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#contact7">Contact</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-8 col-12 mb-15">
                                    <div class="tab-content">
                                        <div class="tab-pane fade show active" id="home7">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                        <div class="tab-pane fade" id="profile7">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                        <div class="tab-pane fade" id="contact7">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Vertical Pill End-->

                <!--Vertical Pill With Icon Start-->
                <div class="col-lg-6 col-12 mb-30">
                    <div class="box">
                        <div class="box-head">
                            <h4 class="title">Vertical Pill With Icon</h4>
                        </div>
                        <div class="box-body">
                            <div class="row mbn-15">
                                <div class="col-md-4 col-12 mb-15">
                                    <ul class="nav nav-pills flex-column">
                                        <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#home8"><i class="zmdi zmdi-home"></i> Home</a></li>
                                        <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#profile8"><i class="zmdi zmdi-account"></i> Profile</a></li>
                                        <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#contact8"><i class="zmdi zmdi-email"></i> Contact</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-8 col-12 mb-15">
                                    <div class="tab-content">
                                        <div class="tab-pane fade show active" id="home8">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                        <div class="tab-pane fade" id="profile8">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                        <div class="tab-pane fade" id="contact8">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Vertical Pill With Icon End-->

                <!--How To Use Start-->
                <div class="col-12">
                    <div class="box">
                        <div class="box-head">
                            <h4 class="title">How To Use</h4>
                        </div>
                        <div class="box-body">
                            <h6>Basic Use HTML</h6>
                            <code>
                            &lt;ul class="nav nav-tabs mb-15"&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li class="nav-item"&gt;&lt;a class="nav-link active" data-toggle="tab" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li class="nav-item"&gt;&lt;a class="nav-link" data-toggle="tab" href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li class="nav-item"&gt;&lt;a class="nav-link" data-toggle="tab" href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;div class="tab-content"&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div class="tab-pane fade show active" id="home"&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;p&gt;...&lt;/p&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div class="tab-pane fade" id="profile"&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;p&gt;...&lt;/p&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div class="tab-pane fade" id="contact"&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;p&gt;...&lt;/p&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&lt;/div&gt;
                        </code>
                            <p class="mt-15">For more Information please follow the <a class="text-primary" href="https://getbootstrap.com/docs/4.3/components/navs/#javascript-behavior">Official Documentation</a></p>
                        </div>
                    </div>
                </div>
                <!--How To Use End-->

            </div>

        </div><!-- Content Body End -->

        <!-- Footer Section Start -->
        <div class="footer-section">
            <div class="container-fluid">

                <div class="footer-copyright text-center">
                    <p class="text-body-light">2019 &copy; <a href="http://www.booTStrapmb.com">Codecarnival</a></p>
                </div>

            </div>
        </div><!-- Footer Section End -->

    </div>

    <!-- JS
============================================ -->

    <!-- Global Vendor, plugins & Activation JS -->
    <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <!--Plugins JS-->
    <script src="assets/js/plugins/perfect-scrollbar.min.js"></script>
    <script src="assets/js/plugins/tippy4.min.js.js"></script>
    <!--Main JS-->
    <script src="assets/js/main.js"></script>

    <script>
        $('#exampleModal5').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var recipient = button.data('whatever') // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            modal.find('.modal-title').text('New message to ' + recipient)
            modal.find('.modal-body input').val(recipient)
        })
    </script>

</body>

</html>